<template>
  <div class="layout_addprogram">
    <div class="top">
      <ul class="ul">
        <li style="margin:0 20px;padding:0 "
          class="li"
          v-for="(item,index) in list"
          :key="index"
          :class="currentIndex == index?'currentStyle':''"
          
        >
          <div style="height:100%;width:auto;" @click="tabEvent(index)">{{item.val}}</div>
          <span class="listclose" @click.prevent="closelist(index)">✖️</span>
        </li>
      </ul>
      <span class="addbtn" @click="addProjectNum">+</span>
    </div>
    <keep-alive>
      <form1 v-if="currentIndex == 0"></form1>
      <form2 v-if="currentIndex == 1" ref="mychild"></form2>
      <form3 v-if="currentIndex == 2" ref="mychild"></form3>
    </keep-alive>

    <button @click="createdBill()">提交</button>
  </div>
</template>

<script>
import form1 from "@/components/pt_sdan/form1";
import form2 from "@/components/pt_sdan/form2";
import form3 from "@/components/pt_sdan/form3";
import { Toast } from "mint-ui";
import api from "../../assets/js/apiPt";
let timer;
export default {
  data() {
    return {
      currentIndex: "",
      list: [
        {
          val: "项目1",
          id: "1"
        }
      ],
      projectNum: 1,
      arr: [],
      isClosed: "",
      mark2: false,
      mark: true
    };
  },
  components: {
    form1,
    form2,
    form3
  },
  created() {
    document.title = "录入升单信息";
    this.axios.defaults.baseURL = api;
    this.hospital = decodeURI(location.hash.split("=")[1]).split("&")[0];
    this.isClosed = location.hash.split("&")[3].split("=")[1];
  },
  methods: {
    tabEvent(e) {
      this.currentIndex = e;
    },
    addProjectNum() {
      if (this.projectNum > 2) {
        return false;
      }
      this.projectNum++;
      let obj = {};
      this.list.push(obj);
      this.list.forEach((e, index) => {
        e.id = this.projectNum;
        //  e.val = '项目'+ (index - 0)+1
        e.val = index + 1;
        e.val = "项目" + e.val;
      });
      if (this.list.length == 2) {
        localStorage.setItem("obj2", 1);
      }
      if (this.list.length == 3) {
        localStorage.setItem("obj3", 1);
      }
    },
    // 删除项目的标签页
    closelist(e) {
      if (e == 0) {
        return false;
      } else {
        this.list.splice(e, 1);
        this.projectNum--;
        console.log(this.list);
      }
      if (e == 1) {
        localStorage.removeItem("obj2");
        this.$refs.mychild.cleardata();
      }
      if (e == 2) {
        localStorage.removeItem("obj3");
        this.$refs.mychild.cleardata();
        this.mark = false;
        this.$nextTick(() => {
          this.mark = true;
        });
      }
    },
    createdBill() {
      this.arr = [];
      let obj1, obj2, obj3;
      if (localStorage.obj1) {
        obj1 = JSON.parse(localStorage.obj1);
      }
      if (localStorage.obj2) {
        obj2 = JSON.parse(localStorage.obj2);
        console.log(obj2);
        if (this.list.length > 1) {
          if (!obj2.categoryId) {
            Toast({
              message: "请选择项目类型",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj2.projectName) {
            Toast({
              message: "请输入项目名称",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj2.doctorName) {
            Toast({
              message: "请选择手术医生",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (obj2.operationTime == "请选择手术时间") {
            Toast({
              message: "请选择手术时间",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj2.amount) {
            Toast({
              message: "请填写消费总金额",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj2.verifyImg) {
            Toast({
              message: "请上传消费凭证",
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        }
      }
      if (localStorage.obj3) {
        obj3 = JSON.parse(localStorage.obj3);
        if (this.list.length > 2) {
          if (!obj3.categoryId) {
            Toast({
              message: "请选择项目类型",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj3.projectName) {
            Toast({
              message: "请输入项目名称",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj3.doctorName) {
            Toast({
              message: "请选择手术医生",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (obj3.operationTime == "请选择手术时间") {
            Toast({
              message: "请选择手术时间",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj3.amount) {
            Toast({
              message: "请填写消费总金额",
              position: "bottom",
              duration: 2000
            });
            return false;
          } else if (!obj3.verifyImg) {
            Toast({
              message: "请上传消费凭证",
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        }
      }
      if (!obj1.categoryId) {
        Toast({
          message: "请选择项目类型",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (!obj1.projectName) {
        Toast({
          message: "请输入项目名称",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (!obj1.doctorName) {
        Toast({
          message: "请选择手术医生",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (obj1.operationTime == "请选择手术时间") {
        Toast({
          message: "请选择手术时间",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (!obj1.amount) {
        Toast({
          message: "请填写消费总金额",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else if (!obj1.verifyImg) {
        Toast({
          message: "请上传消费凭证",
          position: "bottom",
          duration: 2000
        });
        return false;
      } else {
        // console.log(this.str4)
        if (obj1) {
          this.arr.push(obj1);
        }
        if (obj2) {
          this.arr.push(obj2);
        }
        if (obj3) {
          this.arr.push(obj3);
        }

        // console.log(this.arr)
        let load = this.loading("加载中");
        load.show();
        this.axios
          .post(
            "/api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/upgradeOrder.html",
            {
              upgradeRequestDTOS: this.arr,
              isClosed: this.isClosed - 0
            }
          )
          .then(msg => {
            this.isdisabledBtn = false;
            console.log(msg.data);
            if (msg.data.code == 0) {
              Toast({
                message: msg.data.msg,
                position: "bottom",
                duration: 2000
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/indexPage",
                  query: { tab_selected: 2 }
                });
              }, 1500);
              localStorage.removeItem("obj1");
              localStorage.removeItem("obj2");
              localStorage.removeItem("obj3");
            } else if (msg.data.code == 250) {
              Toast({
                message: "登录过期，请重新登陆",
                position: "bottom",
                duration: 2000
              });
              this.$router.push("/login");
              return false;
            } else {
              Toast({
                message: msg.data.msg,
                position: "bottom",
                duration: 2000
              });
            }
            load.hide();
          })
          .catch(error => {
            console.log(error);
            load.hide();
            this.isdisabledBtn = false;
            Toast({
              message: "请求失败，请稍后重试",
              position: "bottom",
              duration: 2000
            });
          });
      }
    }
  }
};
</script>





<style scoped lang="less">
.layout_addprogram {
  width: 100%;
  // height: 100%;
  overflow: auto;
  font-size: 17px;
  color: #666;
  text-align: center;
  margin: 0 auto;
  /* background:rgba(204,204,204,.2018); */
}

.isFinis {
  height: 48px;
  width: 100%;
  line-height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding-left: 15px;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.uploadMoudle {
  margin-top: 10px;
  background-color: #fff;
  padding: 13px 15px;
}
.uploadMoudle p {
  font-size: 16px;
  text-align: left;
  margin-bottom: 13px;
}

.isFirstSelect {
  height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  display: flex;
  background-color: #fff;
  padding-left: 15px;
}
.isFirstSelect label {
  height: 48px;
  line-height: 48px;
}

.note {
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding: 0 15px;
  font-size: 17px;
  color: #666;
  margin-top: 10px;
}

.row {
  min-height: 48px;
  line-height: 48px;
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding-left: 15px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  position: relative;
  display: flex;
}

.row input {
  height: 46px;
  margin-bottom: 2px;
  background-color: #fff;
  font-size: 17px;
  padding-left: 10px;
}

.gray {
  width: 100%;
  height: 10px;
  background: rgba(204, 204, 204, 0.2018);
}
.cube-btn {
  height: 48px !important;
  min-width: 70% !important;
  background: #fff !important;
  color: #666 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding: 17px 15px !important;
  float: left;
}
.cube-radio {
  display: inline-block !important;
}
.cube-radio-group {
  display: flex !important;
}
.cube-radio_selected .cube-radio-ui {
  background-color: #d8d8d8 !important;
}
.mint-field:nth-last-of-type(1) {
  border-bottom: none !important;
}

.cube-textarea::placeholder {
  color: #fff !important;
}
.cube-select::after {
  border: 0 !important;
}
.cube-select {
  width: 71% !important;
  line-height: 1.9 !important;
}
.cube-picker-confirm {
  color: #999;
}
</style>

<style lang="less">
.layout_addprogram {
  .cube-select-icon {
    display: none !important;
  }
  .select-icon {
    display: block;
    font-size: 20px;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99;
  }
  .time-btn {
    width: 50%;
  }
  .cube-textarea-wrapper,
  .cube-textarea {
    min-height: 120px !important;
    border-color: rgba(204, 204, 204, 1);
  }
  .cost {
    display: inline-block;
    .tip {
      color: #ccc;
      margin-top: -25px;
    }
  }
  .credit {
    .cube-switch {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    .cube-switch .cube-switch-input:checked + .cube-switch-ui {
      background-color: #09bb07;
      border-color: #09bb07;
    }
  }
  .check_num {
    .get-msg {
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  ::placeholder,
  .cube-select-placeholder {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
  }
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.ul {
  width: 89%;
  height: 50px;
  line-height: 50px;
  color: #919191;
  display: flex;
  padding: 0 15px;
  overflow-x: scroll;
  .li {
    width: auto;
    margin: 0 20px;
    white-space: nowrap;
    position: relative;
    .listclose {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #eee;
      position: absolute;
      // font-size: 14px;
      line-height: 20px;
      text-align: center;
      top: 2px;
      right: -19px;
    }
  }
}
.datefalse {
  color: #ccc;
}
.currentStyle {
  color: #ff83a6;
  border-bottom: 2px solid #ff83a6;
}
.addbtn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(151, 151, 151, 1);
  border-radius: 50%;
  color: #888;
  font-size: 30px;
  line-height: 26px;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 24%;
  right: 15px;
}
</style>

